<template>
  <uni-popup ref="popupRef" type="center" border-radius="10px 10px 0 0" :mask-click="false">
    <view class="pop-content">
      <view class="title">
        <view class="btn" @click="cancelOrderFun">退单</view>
        <view class="subTitle">
          <view class="text">{{state.clickItem?.order_no}}</view>
          <view class="text subText">{{state.clickItem?.name}}</view>
        </view>
        <view class="titleRight">
          <uni-icons type="close" size="30" @click="closePopup"></uni-icons>
        </view>
      </view> 
      <view class="popForm">
        <uni-forms 
          v-model="state.formData"
          ref="formRef"
          :rules="rules"
          validateTrigger="bind"
          :label-width="110"
          label-align="left"
          :labelStyle="{ fontWeight: 'bold'}"
        >
          <uni-forms-item required label="订单价格:" name="price">
            <uni-easyinput type="number" v-model="state.formData.price" placeholder="请输入订单价格" :disabled="state.formData.yetPrice > 0"/>
          </uni-forms-item>
          <uni-forms-item required label="学生本次付款:" name="yetPrice">
            <uni-easyinput type="number" v-model="state.formData.yetPrice" placeholder="请输入付款价格" />
          </uni-forms-item>
          <uni-forms-item required name="sendPrice" label="派单价格:">
            <uni-easyinput type="number" v-model="state.formData.sendPrice" placeholder="请输入派单价格" :disabled="state.clickItem.status > 1 ? true : false"/>
          </uni-forms-item>
        </uni-forms>  
      </view>
      <view class="submit">
        <button class="saveBtn" @tap="onSave">保存</button>
      </view>
    </view>
  </uni-popup>
</template>

<script setup>
  import {ref, unref, reactive,watch }  from 'vue'
  import {onLoad, onShow } from '@dcloudio/uni-app'
  import { editOrderPrice, cancelOrder } from '@/utils/front.js'
  const popupRef = ref(null);
  const formRef = ref(null);
  const emits = defineEmits(['refresh'])
  const props = defineProps({
    currentItem: {
      type: Object,
      default: () => ({})
    }
  })
  const state = reactive({
    clickItem: {},
    formData: {
      price: "",
      yetPrice: "",
      sendPrice: ""
    }
  })
  const rules = {
    price: {
      rules: [
        {
          required: true,
          errorMessage: "请输入订单价格"
        }
      ]
    },
    yetPrice: {
      rules: [
        {
          required: true,
          errorMessage: "请输入付款价格"
        }
      ]
    },
    sendPrice: {
      rules: [
        {
          required: true,
          errorMessage: "请选择派单价格"
        }
      ]
    }
  };
  watch(
    () => props.currentItem,
    () => {
      if (props.currentItem) {
        console.log(99)
        state.clickItem = props.currentItem
        state.formData.price = props.currentItem?.price
        state.formData.yetPrice = 0
        state.formData.sendPrice = props.currentItem.send_price
      }
    }
  )
  // 点击保存
  const onSave = async() => {
    const validate = await unref(formRef)
      .validate()
      .catch(error => {
        console.log("error: ", error);
      });
    if (!validate) {
      return;
    }
    const { price, sendPrice, yetPrice} = state.formData
    let params = {
      price: Number(price),
      send_price: Number(sendPrice),
      yet_price: Number(yetPrice),
      id: props.currentItem?.id     
    }
    editOrderPrice(params).then((res) => {
      if (res?.code == 1) {
        closePopup()
        emits('refresh')
      } 
    })
    console.log(112, state.formData, params)
  }
  // 点击退单
  const cancelOrderFun = () => {
    cancelOrder({id: props.currentItem?.id}).then((res) => {
      if(res?.code == 1){
        closePopup()
        emits('refresh')
      }
    })
  }
  const openPopup = () => {
    popupRef.value.open()
    if (props.currentItem) {
      console.log(144)
      state.clickItem = props.currentItem
      state.formData.price = props.currentItem?.price
      state.formData.yetPrice = 0
      state.formData.sendPrice = props.currentItem.send_price
    }
  }
  const closePopup = () => {
    popupRef.value.close()
  }
  
  // 将方法暴露给父组件
  defineExpose({
    openPopup
  });
  
</script>

<style lang="scss" scoped>
  .pop-content{
    width: 686rpx;
    border-radius: 20rpx;
    background: #ffffff;
    padding:20rpx;
    .title{
      display: flex;
      width: 100%;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      .btn{
        width: 152rpx;
        height: 66rpx;
        border-radius: 10rpx;
        background: rgba(251, 46, 39, 1);
        display: flex;
        justify-content: center;
        align-items: center;
        font-family: HarmonyOS Sans SC;
        font-weight: 400;
        font-size: 40rpx;
        color: #ffffff;
      }
      .subTitle{
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        .text{
          font-family: HarmonyOS Sans SC;
          font-weight: 400;
          font-size: 48rpx;
          text-align: center;
          color:rgba(60, 60, 60, 1);
        }
        .subText{
          width: 236rpx;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          font-size: 28rpx;
        }
      }
    }
    .popForm{
      width: 100%;
    }
    .saveBtn{
      width: 444rpx;
      height: 84rpx;
      border-radius: 10rpx;
      background: rgba(135, 255, 124, 1);
      display: flex;
      justify-content: center;
      align-items: center;
      font-family: HarmonyOS Sans SC;
      font-weight: 400;
      font-size: 40rpx;
      color: rgba(83, 83, 83, 1);
    }
  }
</style>